<template>
    <div>
        <h1>查看考勤</h1>
        <el-card>
            <h2>{{ clazzName }}班</h2>
            <p>课程：{{ courseName }}</p>
            <p>时间：第{{ week }}周 周{{ day }} {{ startPeriod }}-{{ endPeriod }}节</p>
        </el-card>

        <el-table :data="students" style="width: 100%; margin-top: 20px;">
            <el-table-column prop="number" label="学号" />
            <el-table-column prop="name" label="姓名" />
            <el-table-column prop="attendanceStatus" label="考勤状态" />
        </el-table>
    </div>
</template>

<script>
import service from '@/api';

export default {
    data() {
        return {
            clazzName: '',
            courseName: '',
            week: 1,
            day: 1,
            startPeriod: 1,
            endPeriod: 1,
            students: []
        }
    },
    created() {
        this.fetchData();
    },
    methods: {
        async fetchData() {
            // 获取考勤数据
            const attendance = await service.get(`/api/attendance/${this.$route.params.id}/details`, null, "获取考勤信息");
            this.clazzName = attendance.courseSchedule.clazz.name;
            this.courseName = attendance.courseSchedule.courseName;
            this.week = attendance.courseSchedule.week;
            this.day = attendance.courseSchedule.day;
            this.startPeriod = attendance.courseSchedule.startPeriod;
            this.endPeriod = attendance.courseSchedule.endPeriod;

            // 获取学生考勤信息
            this.students = attendance.details.map(detail => ({
                number: detail.student.number,
                name: detail.student.name,
                attendanceStatus: detail.status
            }));
        }
    }
}
</script>

<style scoped>
.el-card {
    margin-bottom: 20px;
}
</style>